<script setup lang="ts">
import {useAppointmentOrder} from "@/stores/AppointmentOrder";
import ReservationCard from "@/components/ReservationCard.vue";
import {useUserStore} from '@/stores/user'

const userStore = useUserStore()
/**
 * 预约订单弹窗
 */
const appointmentOrder = useAppointmentOrder()
const resBtn = () => {
  appointmentOrder.appointBoxState = true
}
</script>

<template>
  <div class="container-banner">
    <img src="@/assets/banner6.png" alt="">
    <div class="text">
      <h1>品质修车 售后保障就选修哒哒</h1>
      <p>每一颗螺丝的承诺——修哒哒，高端车主的首选养护平台</p>
    </div>
    <div class="res-box">
      <el-tooltip
          effect="dark"
          content="请先登录后预约"
          placement="top"
          :disabled="userStore.authState"
      >
        <el-button
            type="primary"
            class="reservation"
            @click="resBtn"
            :disabled="!userStore.authState"
        >立即预约
        </el-button>
      </el-tooltip>
    </div>
  </div>
  <ReservationCard></ReservationCard>
</template>

<style scoped>
.container-banner {
  position: relative;
  width: 100%; /* 改为100%而不是100vw */
  height: 440px;
  z-index: 1;
  overflow: hidden;
  img {
    position: absolute;
    width: 100vw;
    min-width: 100%;
    height: 100%;
    left: 50%;
    transform: translateX(-50%);
    object-fit: cover;
    max-width: none !important; /* 覆盖Tailwind的限制 */
  }

  .text {
    position: absolute;
    width: 100%; /* 文本区域宽度100% */
    max-width: 1200px; /* 限制最大宽度 */
    left: 50%;
    transform: translateX(-50%); /* 水平居中 */
    /* 其他样式保持不变... */
    display: block;
    color: #ffffff;
    top: 160px; /* 修改定位方式 */
    z-index: 2;

    h1 {
      font-size: 52px;
      font-weight: bold;
    }

    p {
      font-size: 24px;
      margin-top: 10px;
    }

  }

  .res-box {
    position: absolute;
    width: 100%;
    max-width: 1200px;
    top: 280px; /* 修改定位方式 */
    left: 50%;
    margin-bottom: 50px;
    transform: translateX(-50%);
    z-index: 3;

    .reservation {
      margin-top: 20px;
      width: 180px;
      height: 60px;
      font-size: 20px;
    }
  }
}
</style>